<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="js/jquery-1.4.2.min.js"></script>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #div1 {
            background: #000;
            width: 500px;
            height: 30px;
            position: relative;
        }

        .a_1, .a_2 {
            position: absolute;
            top: 0;
            height: 30px;
        }

        .a_1 {
            left: 0;
            background: #0F6;
        }

        .a_2 {
            right: 0;
            background: #39C;
        }

        input {
            margin-top: 30px;
        }
    </style>

    <script>
        window.onload = function () {
            var oDiv = document.getElementById('div1');
            var aDiv = oDiv.getElementsByTagName('div');
            var aBtn = document.getElementsByTagName('input');
            var lNum = 50;
            var rNum = 25;
            var lNums = (rNum / (lNum + rNum)) * 500;
            var rNums = 500 - lNums;
            aDiv[1].style.width = parseInt(lNums) + 'px';
            aDiv[0].style.width = 500 - parseInt(lNums) + 'px';
            aDiv[0].innerHTML = (lNum / (lNum + rNum)).toFixed(2);
            aDiv[1].innerHTML = (1 - lNum / (lNum + rNum)).toFixed(2);
            aBtn[0].onclick = function () {
                lNum = lNum + 1;
                var lNumss = parseInt(lNum / (lNum + rNum) * 500);
                aDiv[0].style.width = lNumss + 'px';
                aDiv[1].style.width = (500 - lNumss) + 'px';
                aDiv[0].innerHTML = (lNum / (lNum + rNum)).toFixed(2);
                aDiv[1].innerHTML = (1 - lNum / (lNum + rNum)).toFixed(2);
            }
            aBtn[1].onclick = function () {
                rNum = rNum + 1;
                var rNumss = parseInt(rNum / (lNum + rNum) * 500);
                aDiv[0].style.width = (500 - rNumss) + 'px';
                aDiv[1].style.width = rNumss + 'px';
                aDiv[0].innerHTML = (lNum / (lNum + rNum)).toFixed(2);
                aDiv[1].innerHTML = (1 - lNum / (lNum + rNum)).toFixed(2);
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <div class="a_1"></div>
        <div class="a_2"></div>
    </div>
    <input type="button" name="veryhuo-com" value="ͶƱ1" />
    <input type="button" name="veryhuo-com" value="ͶƱ2" />
    <br />
    <br />
</body>
</html>
